<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet"
          ref="<s:url value="/assets/web/css/base.css"></s:url>">
    <!-- bootstrap.min -->
    <link rel="stylesheet" href="<s:url value="/assets/web/css/login/bootstrap.min.css?v=3.3.6"></s:url>">
    <!-- 图表页css    -->
    <link rel="stylesheet" href="<s:url value="/assets/web/css/index/index_chart_4.css"></s:url>">
    <title>实际用时波动趋势</title>
    <style>

    </style>
</head>
<body>
<!-- 标题 -->
<div class="title text-center">
    <span>实际用时波动趋势</span>
    <a class="back" href="javascript:history.go(-1);">
        <img src="<s:url value="/assets/web/img/indexChart/back.png"></s:url>" alt="图片加载中">
    </a>
</div>

<div class="wrrapers">
    <div class="clearfix" style="margin-bottom: 15px;">
        <div class="pull-right">
            <div class="select-container ">
                <select class="select-industry" id="the_options" onchange="selectChange(this.options[this.options.selectedIndex].value)">
                    <option value="">请选择</option>
                    <option value="1001">旅游特色小镇项目</option>
                    <option value="1002">工业项目</option>
                    <option value="1003">交通</option>
                    <option value="1004">城镇基础设施</option>
                    <option value="1005">安置房项目</option>
                    <option value="1006">社会事业项目</option>
                    <option value="1007">商住项目</option>
                    <option value="1008">农林水利环保生态项目</option>
                </select>
                <select class="select-project" id="project_info"  onchange="echartsChange(this.options[this.options.selectedIndex].value)">
                </select>
                <button>添加</button>
            </div>
        </div>
    </div>
    <div class="row chart-wrraper">
        <div class="col-xs-12">
            <div class="chart-item">
                <%--<div class="clearfix">--%>
                    <%--<h4 class="pull-left hidden-font">永泰气化站</h4>--%>
                    <%--<div class="char-lengend pull-right clearfix">--%>
                        <%--<p>正常用时</p>--%>
                        <%--<p>实际用时</p>--%>
                    <%--</div>--%>
                <%--</div>--%>
                <div id="char1" class="charts"></div>
            </div>
        </div>
    </div>
    <div class="row node-wrraper" style="display: none; margin-top:15px;">
        <div class="node">
            <div class="clearfix">
                <div class="project-name hidden-font"></div>
                <div class="project-time clearfix">
                    <p>1</p>
                    <p>2</p>
                    <p>3</p>
                </div>
            </div>
            <div class="clearfix">
                <div class="project-name hidden-font">
                    永泰气化站
                </div>
                <div class="project-time clearfix" title="永泰气化站">
                    <p>1</p>
                    <p>2</p>
                    <p>3</p>
                </div>
            </div>
            <div class="clearfix">
                <div class="project-name hidden-font">
                    永泰气化站
                </div>
                <div class="project-time clearfix" title="永泰气化站">
                    <p>1</p>
                    <p>2</p>
                    <p>3</p>
                </div>
            </div>
        </div>

    </div>
</div>


<script src="<s:url value="/assets/web/js/jquery.min.js?v=2.1.4"></s:url>"></script>
<script src="<s:url value="/assets/web/js/echarts.min.js"></s:url>"></script>
<script src="<s:url value="/assets/web/js/bootstrap.min.js"></s:url>"></script>
<script src="<s:url value="/assets/web/js/index/index_chart_4.js"></s:url>"></script>
<script>
    var myChart = echarts.init(document.getElementById("char1"));
    var option = {
        color:["red","aqua"],
        title:{
            text:"永泰气化站",
            textStyle:{
                fontSize:30,
                top:"0",
                left:"3%",
                color:"white"
            }
        },
        legend:{
            icon:"rect",
            orient:"horizontal",
            // data:[{
            //     name:"实际用时"
            // },{
            //     name:"正常用时"
            // }],
            itemWidth:30,
            itemHeight:20,
            right:20,
            top:0,
            textStyle:{
                color:"white",
                fontSize:20,
                lineHeight:20
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: function (params) {
                // var  data=params[0].value[5];
                return "节点号：" + params[0].name + "号";

            }
        },
        grid: {
            left: '5%',
            right: '5%',
            bottom: '15%',
            // containLabel: true
        },
        dataZoom: [{
            textStyle: {
                color: '#0E8EBD'
            },
            start: 1,
            end: 50,
            dataBackground: {
                areaStyle: {
                    color: '#00A0E9'
                },
            },
            handleStyle: {
                color: "#00A0E9"
            }
        }],
        xAxis: [{
            data: [],
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#3072B0' //颜色
                },
                fontSize: 16,
                lineStyle: {
                    color: "#273657",
                    width: 2
                }
            },
        }],
        yAxis: [{
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#3072B0' //颜色
                },
                formatter: '{value} 天',
                fontSize: 16, //字体大小
                lineStyle: {
                    color: "#273657",
                    width: 2
                }
            },
            splitLine: { //设置网格线
                show: true,
                lineStyle: {
                    color: ['#273556'],
                    width: 1,
                    type: 'solid'
                }
            }
        }],
        series: [{
            name:"实际用时",
            type: 'line',
            data: [],
            smooth: false,
            symbolSize: 10, //设定实心点的大小
            itemStyle: {
                borderColor: "transparent", //小圆点颜色
            },
            lineStyle: {
                color: "red",
                width: 3
            }
        },
            {
                name:"正常用时",
                type: 'line',
                data: [],
                smooth: false,
                symbolSize: 10, //设定实心点的大小
                itemStyle: {
                    borderColor: "transparent", //小圆点颜色
                },
                lineStyle: {
                    // color: "#39789E",
                    color:"aqua",
                    width: 3
                }
            },
        ]
    };
    myChart.setOption(option);

    function selectChange(data){
        var project_info = document.querySelector("#project_info")
        $.ajax({
            type: "GET",
            url: "/chart/queryByType?industryType="+ data,
            dataType: "json",
            contentType: 'application/json;charset=UTF-8',
            success: function (res) {
                project_info.innerHTML = ""
                for(let i=0;i<6;i++){
                    var option = document.createElement("option")
                    option.value = res.data[i].item.sysId;
                    option.innerHTML = res.data[i].item.name
                    project_info.appendChild(option)
                }
                $.ajax({
                    type: "GET",
                    url: "/app/newProject/chart2PlaneNewProjectDetail?id="+res.data[0].item.sysId,
                    dataType: "json",
                    contentType: 'application/json;charset=UTF-8',
                    success: function (res) {
                        setEcharts(res.data.eachNodeTime)
                    }
                });
            }
        });
    }
    function echartsChange(data){
        $.ajax({
            type: "GET",
            url: "/app/newProject/chart2PlaneNewProjectDetail?id="+data,
            dataType: "json",
            contentType: 'application/json;charset=UTF-8',
            success: function (res) {
                setEcharts(res.data.eachNodeTime)
            }
        });
    }
 function setEcharts(data){
   var echartsArr = data;
     option.xAxis[0].data = [];
     option.series[0].data = [];
     option.series[1].data = [];
     for(let i=0;i<echartsArr.length;i++){
         option.xAxis[0].data.push(echartsArr[i].bigNodeName);
         option.series[0].data.push(echartsArr[i].factTime)
         option.series[1].data.push(echartsArr[i].planTime)
     }
     myChart.setOption(option);
 }
    window.addEventListener("resize", function () {
        myChart.resize();
    });

</script>

</body>
</html>